<template>
  <view>
    <view class="header">
      <view class="back" @click="back()">
        <uni-icons type="left" size="20"></uni-icons>
      </view>
      <text>社团详情</text>
    </view>
    <view class="container">
      <view class="org-title">
        {{orgnizationInfo.orgName}}
      </view>
      <view class="time">
        发布时间：{{orgnizationInfo.foundedDate}}
      </view>
      <view class="org-main">
        {{orgnizationInfo.description}}
      </view>
      <swiper :indicator-dots="true" class="imageMain" indicator-active-color="#fff" :interval="3000" :duration="5000"
        @change='changeImage'>
        <block v-for="(item,index) in orgnizationInfo.orgPhotoVOS" :key="index">
          <swiper-item class="imageBox" @click="preview(current)">
            <image :src="item.photoUrl" mode=""></image>
          </swiper-item>
        </block>
      </swiper>
      <view class="swiper-title">
        {{orgnizationInfo.orgPhotoVOS[current].description}}
      </view>
      <view class="footer">
        <view class="president">
          社长： {{orgnizationInfo.president}}
        </view>
        <view class="contactPhone">
          社团电话： {{orgnizationInfo.contactPhone}}
        </view>
        <view class="contactEmail">
          社团邮箱: {{orgnizationInfo.contactEmail}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        orgId: 0,
        orgnizationInfo: {},
        current: 0
      };
    },
    onLoad(options) {
      this.orgId = options.orgId
      this.getOrgnizationInfo()
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      changeImage(e) {
        this.current = e.detail.current
      },
      preview(i) {
        uni.previewImage({
          current: i,
          urls: this.orgnizationInfo.orgPhotoVOS.map(item => item.photoUrl)
        })
      },
      async getOrgnizationInfo() {
        const data = await uni.$http.get(`/users/orgnization/${this.orgId}`)
        console.log(data.data.data);
        this.orgnizationInfo = data.data.data

      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .header {
    position: relative;
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color: #fff;

    .back {
      position: absolute;
      top: 4rpx;
      left: 23rpx;
      height: 50rpx;
    }
  }

  .container {
    padding: 0 40rpx;
    border-top: 1rpx solid #eee;
    box-sizing: border-box;

    .org-title {
      margin-top: 40rpx;
      font-size: 46rpx;
      // font-weight: 700;
      text-align: center;
    }

    .time {
      margin-top: 40rpx;
      color: #999;
      font-size: 26rpx;
      text-align: center;
    }

    .org-main {
      margin-top: 50rpx;
      font-size: 32rpx;
      text-indent: 2ex;
      line-height: 65rpx;
      color: #555;
    }

    // .image-main {
    //   margin-top: 40rpx;

    //   .image-box {
    //     display: flex;
    //     flex-direction: column;
    //     align-items: center;
    //     margin-top: 40rpx;
    //     padding-bottom: 30rpx;
    //     border-bottom: 4rpx solid #ddd;

    //     .image {
    //       width: 90%;
    //       height: 350rpx;

    //       image {
    //         width: 100%;
    //         height: 100%;
    //       }
    //     }

    //     text {
    //       margin-top: 20rpx;
    //       font-size: 30rpx;
    //       color: #777;
    //     }
    //   }
    // }

    .imageMain {
      margin-top: 40rpx;
      height: 400rpx;

      .imageBox {}
    }

    .swiper-title {
      text-align: center;
      margin-top: 20rpx;
      padding-bottom: 30rpx;
      font-size: 26rpx;
      color: #aaa;
      border-bottom: 4rpx solid #ddd;
    }

    .footer {
      margin-top: 40rpx;
      color: #999;
      font-size: 26rpx;

      .president,
      .contactEmail,
      .contactPhone {
        text-align: center;
        margin-top: 20rpx;
      }
    }
  }
</style>